<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width, initial-scale=1">
		<!--stylesheet 不可省  样式表关系-->
		<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
  
  <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
	
		<title></title>
	</head>
	<body style="padding: 50px; background-color: #CCCCCC;">
		<div class="container" style=" padding: 30px; background-color: #FFFFFF;">
			<!--图表样式-->
			<!--page-header 标题修饰线-->
			<h2 class="page-header">biaoti</h2>
			<div>
				<!--img-responsive  图片响应式-->
				<img class="img-responsive " src="../images/3.jpg" />
				<!--center-block 图片居中-->
				<img class="img-responsive center-block" src="../images/3.jpg" />
				<!--图片形状  -->
				<img class="img-responsive img-rounded" src="../images/3.jpg" />
				<img class="img-responsive img-circle" src="../images/3.jpg" />
				<img class="img-responsive img-thumbnail" src="../images/3.jpg" />
				<p>dfsvggfhbygtfjyh</p>
				<!--辅助类    情境文本颜色-->
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh....</p>
<p class="text-primary">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh....</p>
<p class="text-success">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh....</p>
<p class="text-info">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh....</p>
<p class="text-warning">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh....</p>
<p class="text-danger">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh....</p>
<p class="sr-only">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh....</p>			
	<!--背景色-->		
	<p class="bg-primary">.dapibus.</p>
<p class="bg-success">dapibus...</p>
<p class="bg-info">..dapibus.</p>
<p class="bg-warning">.dapibus..</p>
<p class="bg-danger">..dapibus.</p>
	<!--关闭按钮
通过使用一个象征关闭的图标，可以让模态框和警告框消失。-->		

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<!--三角符号

通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意，向上弹出式菜单中的三角符号是反方向的。-->
<span class="caret"></span>
<!--快速浮动
通过添加一个类，可以将任意元素向左或向右浮动。!important 被用来明确 CSS 样式的优先级。
这些类还可以作为 mixin（参见 less 文档） 使用。
通过为父元素添加 .clearfix 类可以很容易地清除浮动（float）。
这里所使用的是 Nicolas Gallagher 创造的 micro clearfix 方式。此类还可以作为 mixin 使用。
-->

<div class="pull-left" style="width: 300px;height: 200px;background-color: #1B6D85;">.sdfd</div>
<div class="pull-right" style="width: 300px;height: 200px;background-color: #F0AD4E;">dsfdv</div>

<!--
不能用于导航条组件中
排列导航条中的组件时可以使用这些工具类：.navbar-left 或 .navbar-right 。 参见导航条文档以获取更多信息。
-->
<!--
	让内容块居中

为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中。下面列出的类还可以作为 mixin 使用。
-->
<div class="center-block">.dsfdddd</div>
<!--显示或隐藏内容

.show 和 .hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。
这些类通过 !important 来避免 CSS 样式优先级问题，就像 quick floats 一样的做法。
注意，这些类只对块级元素起作用，另外，还可以作为 mixin 使用。
.hide 类仍然可用，但是它不能对屏幕阅读器起作用，并且从 v3.0.1 版本开始就不建议使用了。
请使用 .hidden 或 .sr-only 。
另外，.invisible 类可以被用来仅仅影响元素的可见性，也就是所，
元素的 display 属性不被改变，并且这个元素仍然能够影响文档流的排布。-->
<div class="show">...</div>
<div class="hidden">...</div>
<!--屏幕阅读器和键盘导航

.sr-only 类可以对屏幕阅读器以外的设备隐藏内容。.sr-only 和 .sr-only-focusable 
联合使用的话可以在元素有焦点的时候再次显示出来（例如，使用键盘导航的用户）。对于遵循 可访问性的最佳实践 很有必要。
这个类也可以作为 mixin 使用。-->
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
<!--
	图片替换
使用 .text-hide 类或对应的 mixin 可以用来将元素的文本内容替换为一张背景图。
-->			
	<h1 class="text-hide">Custom heading</h1>		
			
			
			
			</div>
			
		</div>
		
		
	</body>
</html>
